<template>
  <div class="tablePageWarp" id="carListModel" style="padding: 0">
    <div class="table-page-search-wrapper commonSelectWidth">
      <a-form>
        <a-row :gutter="16">
          <!-- 省份 -->
          <a-col :md="6" :sm="24">
            <a-form-item :colon="false">
              <province-select
                mode="multiple"
                :default-value="dataSource[dataAdress].queryParam.province"
                @changeoption="changeOption($event)"
              ></province-select>
            </a-form-item>
          </a-col>
          <!-- 车辆类型 -->
          <a-col :md="6" :sm="24">
            <a-form-item :colon="false">
              <a-select
                v-model.trim="dataSource[dataAdress].queryParam.vehicleType"
                style="width: 100%"
                showSearch
                allow-clear
                optionFilterProp="children"
                :filterOption="$commonFun.filterOption"
                :getPopupContainer="getNewtaskPopupContainer"
                :placeholder="$t('pleaseSelect') + $t('vehicleType').toLowerCase()"
              >
                <a-select-option v-for="(item, index) in vehicleTypeOptions" :value="item.id" :key="index">
                  {{ $t(item.name) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item :colon="false">
              <a-input v-model.trim="dataSource[dataAdress].queryParam.vin" :placeholder="$t('pleaseInput') + 'VIN'" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" class="btnWarp">
            <div class="searchBtns">
              <a-button @click="refreshData">
                <i class="iconfont icon-chazhao"></i>
                {{ $t('inquiry') }}
              </a-button>
              <a-button
                @click="
                  () => {
                    dataSource[dataAdress].queryParam = {}
                  }
                "
              >
                <i class="iconfont icon-qingkong"></i>
                {{ $t('clear') }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 已选择车辆 -->
    <div style="padding-bottom: 24px">
      <span
      >{{ $t('selectedVehicles') }}
        {{ dataSource[dataAdress].isSlefSelect ? dataSource[dataAdress].selectCarIds.length : totalData }}</span
        >
      <a-checkbox style="float: right" @change="changeSelfSelect" :checked="dataSource[dataAdress].isSlefSelect">{{
        $t('customSelect')
      }}</a-checkbox>
    </div>
    <div class="commonTableSty" ref="carList">
      <a-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :dataSource="loadData"
        :pagination="false"
        :row-selection="
          dataSource[dataAdress].isSlefSelect
            ? { selectedRowKeys: dataSource[dataAdress].selectCarIds, onChange: onSelectChange }
            : null
        "
        :scroll="{ y: scrollDomMaxScrollHeight }"
        @change="handleTableChange"
      >
        <template
          slot-scope="text"
          v-for="column in columns.filter((item) => !item.special)"
          :slot="column.scopedSlots.customRender"
        >
          <table-ellipsis :text="text || '_'" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template slot="vehicleType" slot-scope="text">
          {{ $t(vehicleTypeObj[text]) }}
        </template>
        <template slot="lastActiveTime" slot-scope="text">
          <table-ellipsis :text="$options.filters.moment(text)"></table-ellipsis>
        </template>
        <template slot="province" slot-scope="text">
          <table-ellipsis :text="$t(text)"></table-ellipsis>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { mixinScrollLoadData } from '@/utils/mixin'
import ProvinceSelect from '@/views/components/ProvinceSelect'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { mapState } from 'vuex'
export default {
  name: 'ViewChoseCarList',
  mixins: [mixinScrollLoadData],
  components: { TableEllipsis, ProvinceSelect },
  props: {
    dataAdress: {
      type: String,
      default: 'newTaskData'
    }
  },
  computed: {
    ...mapState({
      dataSource: (state) => state.newTask,
      vehicleTypeOptions: (state) => state.vehicle.types
    }),
    vehicleTypeObj () {
      return this.$store.getters.vehicleTypeObj()
    },
    columns () {
      // 表头
      const columns = [
        {
          title: 'VIN',
          dataIndex: 'vin',
          scopedSlots: { customRender: 'VIN' }
        },
        {
          title: this.$t('vehicleType'),
          dataIndex: 'vehicleType',
          special: true,
          scopedSlots: { customRender: 'vehicleType' }
        },
        {
          title: this.$t('modelCode'),
          dataIndex: 'modelCode',
          scopedSlots: { customRender: 'modelCode' }
        },
        {
          title: this.$t('modelName'),
          dataIndex: 'modelName',
          scopedSlots: { customRender: 'modelName' }
        },
        {
          title: this.$t('stereotype'),
          dataIndex: 'trimLevel',
          scopedSlots: { customRender: 'trimLevel' }
        },
        {
          title: this.$t('latestOnlineTime'),
          dataIndex: 'lastActiveTime',
          sorter: true,
          special: true,
          scopedSlots: { customRender: 'lastActiveTime' }
        },
        {
          title: this.$t('province'),
          dataIndex: 'province',
          special: true,
          scopedSlots: { customRender: 'province' }
        }
      ]
      return columns
    }
  },
  data () {
    return {
      loadData: [],
      pageSize: 30,
      scrollDomRef: 'carList'
    }
  },
  mounted () {
    this.loadPageData()
  },
  methods: {
    loadPageData () {
      const vm = this
      return new Promise((resolve, reject) => {
        const JnqueryParam = JSON.parse(JSON.stringify(vm.dataSource[vm.dataAdress].queryParam))
        for (const key in JnqueryParam) {
          if (JnqueryParam[key] === '') {
            JnqueryParam[key] = undefined
          }
        }
        JnqueryParam.modelIds = [vm.dataSource[vm.dataAdress].modelId]
        vm.loadingPageData = true
        vm.$api
          .getVehiclePageData({ pageNo: vm.pageCount, pageSize: vm.pageSize, ...JnqueryParam })
          .then((res) => {
            let data = res.data
            if (this.pageCount > 1) {
              data = this.tbData.concat(data)
            }
            this.loadData = data
            this.totalData = res.totalCount
            this.totalPage = res.totalPage
            resolve(res)
          })
          .catch((err) => {
            reject(err)
          })
          .finally(() => {
            vm.loadingPageData = false
          })
      })
    },
    // 是否自定义
    changeSelfSelect (e) {
      this.dataSource[this.dataAdress].isSlefSelect = e.target.checked
    },
    onSelectChange (selectedRowKeys) {
      this.dataSource[this.dataAdress].selectCarIds = selectedRowKeys
    },
    changeOption (val) {
      this.$set(this.dataSource[this.dataAdress].queryParam, 'province', val)
    },
    handleTableChange (pagination, filters, sorter) {
      if (sorter && sorter.columnKey) {
        this.sortedInfo = sorter
        if (sorter.order) {
          const orderType = {
            ascend: 'ASC',
            descend: 'DESC'
          }
          this.dataSource[this.dataAdress].queryParam.order = `${sorter.columnKey},${orderType[sorter.order]}`
        } else {
          this.dataSource[this.dataAdress].queryParam.order = null
        }
        this.loadPageData()
      }
    },
    getNewtaskPopupContainer (triggerNode) {
      if (triggerNode) {
        return triggerNode.parentNode
      } else {
        return document.body
      }
    }
  }
}
</script>
